<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>会员缴费-财务管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">

    <link rel="stylesheet" href="../../css/xadmin.css">
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <script src="../../js/base.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        tr td,
        tr th {
            text-align: center !important;
            border: none !important;
        }

        tr td {
            border-bottom: 1px solid #eee !important;
            border-top: 1px solid #eee !important;
        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="display: flex;justify-content: space-between;">
                    <div class="layui-card-body ">
                        <blockquote class="layui-elem-quote" style="border:0;font-size: 18px;color: #000;">会员交费
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <!-- <div class="layui-card-header">数据统计</div> -->
                    <div class="layui-fluid">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-col-md12">
                                <div class="layui-card-body " style="display: flex;justify-content:space-between">
                                    <form class="layui-form" action="">
                                        <div class="layui-inline layui-show-xs-block" style="margin-right: 10px">
                                            <select id="paymentType" name="paymentType">
                                                <option value="">请选择支付方式</option>
                                                <option value="1">微信</option>
                                                <option value="2">支付宝</option>
                                            </select>
                                        </div>
                                        <label>订单号</label>
                                        <div class="layui-inline layui-show-xs-block" style="margin-left: 5px">
                                            <input id="orderNum" name="orderNum" class="layui-input">
                                        </div>
                                        <div class="layui-inline layui-show-xs-block">
                                            <button class="layui-btn search" data-type="reload"
                                                lay-filter="add">搜索</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card-body layui-table-body layui-table-main">

                <!-- 表格部分开始 -->
                <table id="video_table" lay-filter="test" lay-data="{id: 'testReload'}"></table>
                <script type="text/html" id="barDemo2"></script>
                <script type="text/html" id="barDemo">
                    {{#  if(d.paymentStatus == "2"){ }}
                    <a lay-event="drawback" class="btn_a layui-btn layui-btn-primary layui-btn-xs">退款</a>
                    {{#  } else { }}
                        <a lay-event="noClick" class="btn_a layui-btn layui-btn-primary layui-btn-xs layui-btn-disabled">退款</a>
                        <!-- <button lay-event="overTaks"  class="layui-btn-xs layui-btn-disabled">任务已完成</button> -->
                    {{#  }}}
                        <a lay-event="drawbackLook"  class="btn_a layui-btn layui-btn-xs">查看</a>
                </script>
                <!-- 表格结束 -->
            </div>
        </div>
    </div>
    </div>
</body>

</html>

<script>
    layui.use('table', function () {
        var table = layui.table;
        var form = layui.form;

        var index = layer.load(1); //添加laoding,0-2两种方式

        //第一个实例
        var ins1 = table.render({
            elem: '#video_table', //指定原始表格元素选择器（推荐id选择器）
            // height: 600,
            width: "100%",
            // 附加参数，post token
            toolbar: '#barDemo2', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['exports', {
                title: '会员缴费' //标题
                    ,
                layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用
                    ,
                icon: 'layui-icon-tips' //图标类名
            }],
            where: { 'payType': 2 },
            loading: true,
            method: 'get',
            url: getOrderList, //数据接口
            page: true, //开启分页
            totalRow: true,
            // toolbar: 'default', //开启工具栏，此处显示默认图标
            cols: [
                [ //表头
                    // { type: 'checkbox', fixed: 'left' },
                    {
                        field: 'id',
                        title: 'ID',
                        width: 120,
                        totalRowText: '合计：'
                    },
                    {
                        field: 'orderNum',
                        title: '订单号',
                        width: 200
                    },
                    {
                        field: 'paymentType',
                        title: '支付方式',
                        width: 120,
                        templet: function (d) {
                            if (d.paymentType == "1") {
                                return "微信"
                            } else if (d.paymentType == "2") {
                                return "支付宝"
                            } else {
                                return ""
                            }
                        }
                    },
                    {
                        field: 'name',
                        title: '支付人',
                        width: 150,
                        templet: function (d) {
                            if (d.name == "" || d.name == null) {
                                return "匿名"
                            } else {
                                return d.name
                            }
                        }
                    },
                    {
                        field: 'payTime',
                        title: '支付时间',
                        width: 150
                    },
                    {
                        field: 'price',
                        title: '支付金额',
                        width: 150,
                        totalRow: true,
                        templet: function (d) {
                            return d.price + "元"
                        }
                    },
                    {
                        field: 'payType',
                        title: '用途',
                        width: 130
                    },
                    {
                        field: 'paymentStatus',
                        title: '订单状态',
                        width: 150,
                        templet: function (d) {
                            if (d.paymentStatus == "1") {
                                return "待支付"
                            } else if(d.paymentStatus == "2"){
                                return "支付成功"
                            }else if(d.paymentStatus == "3"){
                                return "支付失败"
                            }else if(d.paymentStatus == "4"){
                                return "已退款"
                            }else{
                                return ""
                            }
                        }
                    },
                    {fixed: 'right', title: "操作", width: 220, align: 'center', toolbar: '#barDemo'}
                ]
            ],
            id: 'testReload',
            done: function (res) {
                layer.close(index)
                if (res.msg == "2") {
                    parent.window.location.href = getRequestPrefix() + "/footBallAdmin/login.html"
                }
            }
        });


        //头部输入框筛选功能
        var $ = layui.$,
            active = {

                reload: function () {

                    var paymentType = $('#paymentType');
                    var orderNum = $('#orderNum');
                    // 执行重载（重新加载数据表格）
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                        where: {
                            "paymentType": paymentType.val(),
                            "orderNum": orderNum.val()
                        }
                    }, 'data');
                }
            };


        //给查询添加点击事件
        $('.search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            //一定要阻止表单的默认行为（刷新）
            return false
        });


        //监听头工具栏事件


        //监听点击的按钮，获取行信息
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            //获得当前行数据
            var $ = layui.$
            var data = obj.data, layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === "drawback") {
                // layer.msg('修改操作');
                layer.open({
                    content: "edit_drawback.html",
                    type: 2,//打开的窗口的类型
                    area: ["600px", "500px"],
                    title: "发起退款",
                    // btn: ['确认', '取消'],//开启显示按钮功能
                    // btnAlign: 'c',//居中显示按钮
                    // shade:true,
                    shadeClose: true,
                    success: function (layero, index) {
                        // console.log(data)//获取点击行的数据,获取打开的iframe
        
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        console.log(iframeWin, "子窗口对象")
                        //行信息数据回显
                        console.log(data, "行信息")


                        body.find('#orderNum').val(data.orderNum) //订单号
                        
                        if (data.paymentType == "1") {
                            body.find('#paymentType').val('微信')   //支付方式
                        } else if (data.paymentType == "2") {
                            body.find('#paymentType').val('支付宝')   //支付方式
                        }
                        
                        if (data.name == "" || data.name == null) {
                            body.find('#name').val('匿名')  //支付人名字
                        } else {
                            body.find('#name').val(data.name)  //支付人名字
                        }
                        body.find('#payTime').val(data.payTime)  //支付时间
                        body.find('#price').val(data.price) //支付金额
                        body.find('#payType').val(data.payType) //用途
                       
                        if (data.paymentStatus == "1") {
                            body.find('#paymentStatus').val('待支付') //订单状态
                        } else if(data.paymentStatus == "2"){
                            body.find('#paymentStatus').val('支付成功') //订单状态
                        }else if(data.paymentStatus == "3"){
                            body.find('#paymentStatus').val('支付失败') //订单状态
                        }else if(data.paymentStatus == "4"){
                            body.find('#paymentStatus').val('已退款') //订单状态
                        }else{
                            body.find('#paymentStatus').val('') //订单状态
                        }


                        body.find('#price2').val(data.price)
                        if (data.paymentType == "1") {
                            body.find('#payType2').val('微信')
                        } else if (data.paymentType == "2") {
                            body.find('#payType2').val('支付宝')
                        }

                        body.find('#dataId').val(data.id)
                        body.find('#Showwat').val('修改')
                            
                        //类型回显
                        body.find("#type option").each(function (index, item) {
                            if (item.value == data.type) {
                                $(this).attr("selected", true)
                                $("#type").attr("value", item.text)
                            }
                        })
                        iframeWin.layui.form.render("select")
                    }
                })
            }else if(layEvent === "drawbackLook"){
                layer.open({
                    content: "edit_drawback.html",
                    type: 2,//打开的窗口的类型
                    area: ["600px", "500px"],
                    title: "查看退款",
                    // btn: ['确认', '取消'],//开启显示按钮功能
                    // btnAlign: 'c',//居中显示按钮
                    // shade:true,
                    shadeClose: true,
                    success: function (layero, index) {
                        // console.log(data)//获取点击行的数据,获取打开的iframe
        
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        console.log(iframeWin, "子窗口对象")
                        //行信息数据回显
                        console.log(data, "行信息")


                        body.find('#orderNum').val(data.orderNum) //订单号
                        
                        if (data.paymentType == "1") {
                            body.find('#paymentType').val('微信')   //支付方式
                        } else if (data.paymentType == "2") {
                            body.find('#paymentType').val('支付宝')   //支付方式
                        }
                        
                        if (data.name == "" || data.name == null) {
                            body.find('#name').val('匿名')  //支付人名字
                        } else {
                            body.find('#name').val(data.name)  //支付人名字
                        }
                        body.find('#payTime').val(data.payTime)  //支付时间
                        body.find('#price').val(data.price) //支付金额
                        body.find('#payType').val(data.payType) //用途
                       
                        if (data.paymentStatus == "1") {
                            body.find('#paymentStatus').val('待支付') //订单状态
                        } else if(data.paymentStatus == "2"){
                            body.find('#paymentStatus').val('支付成功') //订单状态
                        }else if(data.paymentStatus == "3"){
                            body.find('#paymentStatus').val('支付失败') //订单状态
                        }else if(data.paymentStatus == "4"){
                            body.find('#paymentStatus').val('已退款') //订单状态
                        }else{
                            body.find('#paymentStatus').val('') //订单状态
                        }


                        body.find('#price2').val(data.price)
                        if (data.paymentType == "1") {
                            body.find('#payType2').val('微信')
                        } else if (data.paymentType == "2") {
                            body.find('#payType2').val('支付宝')
                        }

                        body.find('#refundAdminName').val(data.refundAdminName)
                        body.find('#refundTime').val(data.refundTime)

                        body.find('#dataId').val(data.id)
                        body.find('#Showwat').val('查看')


                        //类型回显
                        body.find("#type option").each(function (index, item) {
                            if (item.value == data.type) {
                                $(this).attr("selected", true)
                                $("#type").attr("value", item.text)
                            }
                        })
                        iframeWin.layui.form.render("select")
                    }
                })
            }
        });

    });
</script>